<template>
  <div class="photos">
    <div class="photos-title-bar">
      <span class="photos-title-text">剧照</span>
      <span class="photos-to-all">全部 ></span>
    </div>
    <div class="photo-list">
      <div class="swiper-wrapper">
        <div v-for="(item, index) in photos" :key="index" class="swiper-slide">
          <img :src="item" alt="剧照" style="width: 40vw;" @click="handlePreview(index)">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import 'swiper/swiper-bundle.min.css'
import Swiper from 'swiper'
import {ImagePreview} from 'vant'

export default {
  name: 'Photos',
  props: {
    photos: Array
  },
  updated() {
    new Swiper('.photo-list', {
      slidesPerView: 3,
      spaceBetween: 120,
      slidesOffsetAfter: 120,
      freeMode: true,
      freeModeMomentumVelocityRatio: 0.5
    })
  },
  methods: {
    handlePreview(index) {
      ImagePreview({
        images: this.photos,
        startPosition: index,
        closeable: true
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.photos {
  margin-top: 2.67vw;
  background-color: #ffffff;

  .photos-title-bar {
    height: 8vw;
    padding: 4vw;
    display: flex;
    justify-content: space-between;

    .photos-to-all {
      font-size: 3.47vw;
      color: #797d82;
    }
  }

  .photo-list {
    overflow: hidden;
    margin-left: 15px;
  }
}
</style>
